<template>
	<view class="mall">
		<view class="user-header">
			<view class="user-text">积分商城</view>
		</view>
		<!-- <view style="margin-top: 128upx;">
			<view class="mall-img" v-for="(item,index) in bannerList" :key="index" @click="hanldActive(item.catid,item.name)">
				<view class="mall-img-title" v-if="item.name">. {{item.name}}</view>
				<view class="mall-line" v-if="item.name"></view>
				<image :src="item.images" class="mall-img-banner"></image>
			</view>
		</view> -->
		<view style="margin-top: 74px;">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" @click="hanldActive(item.catid,item.name)" :key="index">
					<image class="img" :src="item.images"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="mall-img">
			<view class="mall-img-title">. 特价促销</view>
			<view class="mall-line"></view>
			<image src="/static/img/yijian_bann.png" class="mall-img-banner"></image>
		</view> -->
		<view class="mall-tab" style="position: sticky;padding-top: 10px;top: 64px;left: 0;z-index: 9;background-color:  rgba(250, 250, 250, 1);">
			<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
			 :activeColor="activeColor" :acsize="acsize">
			</zzx-tabs>
		</view>
		
		<view style="background-color: #fff">
			<!-- <load-refresh ref="loadRefresh" :isRefresh="true" :refreshTime="800" :heightReduce="10" :backgroundCover="'#F3F5F5'"
			 :pageNo="page" :totalPageNo="totalPage" @loadMore="loadMore" @refresh="refresh">
				<view slot="content-list"> -->
				<view class="list" v-for="(item,index) in goodsList" @click.stop="hanldOrderInfo(item.id)" :key="index">
					<view class="list-item">
						<view class="left">
							<image class="img" :src="item.images[0]">
						</view>
						<view class="right">
							<view class="title">{{item.shortitle}}</view>
							<view class="mall-title">{{item.title}}</view>
							<view class="short-bg">
								<view class="short-bg-num">库存剩余：{{item.sku}}件</view>
							</view>
							<view class="mall-mian">¥{{item.price}}</view>
							<view class="jifen">
								<view class="pirce">
									<view class="now">{{item.intergral}}
										<text style="font-size: 12px;font-weight: normal;">（积分）</text>
									</view>
								</view>
								<view class="mall-but" @click.stop="hanldOrderInfo(item.id)">立即兑换</view>
							</view>
						</view>
					</view>
				</view>
			<!-- 	</view>
			</load-refresh> -->
			
			<view v-if="loadAll&&goodsList.length>=10" class="no-more-data">没有更多了</view>
			<view v-if="goodsList.length == 0" class="no-more-data">
			  暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	import loadRefresh from '@/components/load-refresh/load-refresh.vue'
	export default {
		data() {
			return {
				items: [],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#3E9AFC',
				acsize: '14px',
				bannerList: [],

				page: 1,
				totalPage: 1,
				loadAll: false,
				goodsCateList:[],
				goodsList: [],
			}
		},
		props:{
			loadmore:{
				type : Number,
				default:1
			}
		},
		components: {
			zzxTabs,
			loadRefresh
		},
		watch:{
			loadmore:{
				deep:true,
				handler(newValue,oldValue){
					console.log(newValue)
					if((newValue >= 3 && newValue <= 4) && !this.loadAll){
						console.log('触发上拉加载')
						this.getCateGoods();
					}
				}
			}
		},
		created() {
			this.loadAll = false
			if(uni.getStorageSync('bannerList')){
				this.bannerList = JSON.parse(uni.getStorageSync('bannerList'))
			}
			this.getGoodsBanner()
			this.getCate()
		},
		methods: {
			refresh() {
				// console.log('下拉刷新')
				this.loadAll = false;
				this.goodsList = [];
				this.page = 1;
				this.getCateGoods();
			},
			loadMore() {
				console.log('上拉加载')
				if (!this.loadAll) {
					this.getCateGoods();
				}
			},
			getGoodsBanner() {
				//goods_banner
				this.$http.goods_banner().then(res => {
					console.log(res)
					this.bannerList = res.data
					uni.setStorageSync('bannerList',JSON.stringify(this.bannerList))
				})
			},
			getCate() {
				//goods_banner
				this.$http.goods_cate().then(res => {
					this.items = []
					this.goodsCateList = res.data
					if (res.data && res.data.length > 0) {
						res.data.forEach((val) => {
							this.items.push(val.name)
						})
						this.cate = res.data[0].id
						this.getCateGoods()
					}
				})
			},
			getCateGoods() {
				this.$http.categoods({
					cate:this.cate,
					page: this.page
				}).then(res => {
					console.log(res)
					let _list = res.data.data
					this.totalPage = res.data.last_page;
					let totalPage = res.data.last_page
					if (this.page > totalPage || _list.length == 0) {
						this.loadAll = true
						return
					}
					if (_list.length > 0) {
						this.goodsList = this.goodsList.concat(_list);
					}
					// this.$refs.loadRefresh.loadOver()
					this.page++;
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.goodsCateList.forEach((val,key) => {
						if(this.current == key){
							this.cate = val.id;
							this.loadAll = false;
							this.goodsList = [];
							this.page = 1;
							this.getCateGoods();
						}
					})
				}
				this.$emit('changeLoad',true)
			},
			hanldActive(catid,name) {
				uni.navigateTo({
					url: '/pages/mall/activity?catid='+catid +'&name='+name
				})
			},
			hanldOrderInfo(id) {
				uni.navigateTo({
					url: '/pages/mall/mallShopInfo?id='+id
				})
			}
		},
		
	}
</script>

<style scoped>
	.user-header {
		text-align: center;
		position: relative;
		height: 44px;
		font-size: 16px;
		color: #111110;
		font-weight: bold;
		line-height: 44px;
		position: fixed;
		width: 100%;
		background-color: #fff;
		/* padding-bottom: 100px; */
		z-index: 9999;
		top: 0;
		padding-top: 20px;
	}

	.mall {
		background-color: rgba(250, 250, 250, 1);
		padding-bottom: 100px;
	}

	.mall-img {
		background-color: #FFFFFF;
		padding: 10px;
		margin-bottom: 10px;
		
	}

	.mall-img-title {
		color: rgba(25, 25, 25, 1);
		font-size: 16px;
		font-weight: bold;
	}

	.mall-line {
		height: 14px;
		background-color: rgba(233, 241, 255, 1);
		width: 80px;
		margin-top: -10px;
	}

	.mall-img-banner {
		height: 140px;
		margin: 13px 0;
		border-radius: 10px;
		width: 100%;
	}

	.mall>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #3E9AFC;
	}

	/* list */
	.list {
		display: flex;
		flex-direction: column;
	}

	.list-item {
		padding: 17px 0;
		background-color: #FFFFFF;
		margin-bottom: 10px;
		padding-left: 2%;
		display: flex;
		color: #333;
		position: relative;
		background-color: #FFFFFF;
	}

	.list-item .img {
		width: 110px;
		height: 110px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.list-item .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 65%;
	}

	.list-item .title {
		font-size: 15px;
		color: rgba(0, 0, 0, 1);
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list-item .short-title {
		height: 32upx;
		background: #3E9AFC;
		border-radius: 16upx;
		color: #FFFFFF;
		text-align: center;
		padding: 0 15px;
	}

	.jifen {
		display: flex;
		flex-direction: revert;
		align-items: center;
		justify-content: space-between;
	}

	.mall-title {
		color: rgba(134, 134, 134, 1);
	}

	.list-item .pirce {
		line-height: 30px;
		display: flex;
	}

	.list-item .pirce .now {
		display: flex;
		font-size: 18px;
		color: #3E9AFC;
		font-weight: bold;
		margin-right: 6px;
	}

	/* .list-item .pirce .now .word{ font-size: 12px; } */
	.list-item .pirce .delet {
		color: #666;
		text-decoration: line-through;
	}

	.mall-mian {
		color: rgba(174, 174, 174, 1);
		text-decoration: line-through;
	}

	.list-item .mall-but {
		width: 160upx;
		height: 60upx;
		
		background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
		
box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius: 10upx;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		line-height: 60upx;
	}


	.short-bg {
		position: relative;
		border-radius: 8px;
		color: #2B2A29;
		height: 16px;
		width: 260upx;
	}

	.short-bg-num {
		position: absolute;
		width: 260upx;
		text-align: center;
		color: #2B2A29;
		font-size: 12px;
		
border: 1px solid #2B2A29;
		padding: 0 9px;
		border-radius: 8px;

	}
	.swiper {
		margin: 15px 2% 0px 2%;
		width: 96%;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.swiper .img {
		height: 150px;
		width: 100%;
		border-radius: 10px;
	}
</style>
